<template>
	<div class="x-audio-wrap" ref="wrap" @click="play" @dblclick="againplay">
		<div class="x-time" v-if="isMine">{{  '"' + second }}</div>
		<div class="x-sector" :class="{play:animate,'xright':isMine}">
			<div class="x-dot"></div>
		</div>
		<div class="x-time" v-if="!isMine">{{ second + '"' }}</div>
	</div>
</template>
<script>
export default {
	name:'SoundElement',
	props:{
		payload: {
			type: Object,
			required: true
		},
		message: {
			type: Object,
			required: true
		},
		isMine: {
      type: Boolean,
      default: false,
      required: false
    }
	},
	computed: {
		url() {
			return this.payload.url
		},
		size() {
			return this.payload.size
		},
		second() {
			return this.payload.second
		}
	},
	data(){
		return{
			audio:null,
			animate:false,
			timer:null,
			duration:null
		}
	},
	mounted(){
			this.audio=new Audio()
			this.audio.src=this.url
			this.audio.addEventListener('canplaythrough',()=>{
				this.duration=this.format(this.audio.duration)
			})
			this.audio.onplay=()=>{
				this.animate=true
				this.timer=setInterval(() => {
					this.animate=false
					setTimeout(()=>{
						this.animate=true
					},50)
				}, 1050);
			}
			this.audio.onpause=()=>{
				this.animate=false
				this.timer&&clearInterval( this.timer)
			}
			this.audio.onended=()=>{
				this.animate=false
				this.timer&&clearInterval( this.timer)
			}
			if(!window.audioList){
				window.audioList=[];
			}
			window.audioList.push(this.audio)//所有实例加入全局变量
	},
	methods:{
		play(){
			if(this.audio.paused){
				window.audioList.forEach(audio=>{//开始前先关闭所有可能正在运行的实例
					audio.pause()
				})
				this.audio.play()
			}else{
				this.audio.pause()
			}
		},
		againplay(){
			window.audioList.forEach(audio=>{//开始前先关闭所有可能正在运行的实例
				audio.pause()
			})
			this.audio.currentTime = 0; // 重新播放
			this.audio.play();
		},
		format(s){
			var t='';
			if(s > -1){
				var min = Math.floor(s/60) % 60;
				var sec = s % 60;

				if(min < 10){t += "0";}
				t += min + "'";
				if(sec < 10){t += "0";}
				t += sec.toFixed(2);
			}
			t=t.replace('.','\"')
			return t;
		},
	}
}
</script>
<style lang="scss" scoped>
.x-audio-wrap{
	height: .6rem;
	width: 2.48rem;
	border-radius: .3rem;
	// border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	// box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	.x-sector{
		height: .093333rem;
		width: .093333rem;
		border-radius: .053333rem .133333rem;
		border-right: .026667rem solid #ddd;
		border-top: .026667rem solid #ddd;
		transform: rotate(45deg);
		position: relative;
		margin-left: .133333rem;
		.x-dot{
			height: .053333rem;
			width:  .053333rem;
			border-radius: .053333rem;
			background: #ddd;
			position: absolute;
			top: .053333rem;
		}
		&::before{
			content: "";
			height: .12rem;
			width: .12rem;
			border-radius: .053333rem .16rem;
			border-right: .026667rem solid #ddd;
			border-top: .026667rem solid #ddd;
			transform: rotate(0deg);
			position: absolute;
			right: -.093333rem;
			top: -.093333rem;
		}
		&::after{
			content: "";
			height: .16rem;
			width: .16rem;
			border-radius: .053333rem .186667rem;
			border-right: .026667rem solid #ddd;
			border-top: .026667rem solid #ddd;
			transform: rotate(0deg);
			position: absolute;
			right: -.173333rem;
			top: -.173333rem;
		}
		&.xright{
			transform: rotate(230deg);
		}
	}
	.x-time{
		color: #999;
		font-size: .16rem;
		margin-right: .133333rem;
	}
	&.inline{
		display: inline-flex
	}
}

@keyframes play-dot{
    from{
        background: #ddd
    }
    to{
        background: #5cadff
    }
}
@keyframes play-sector{
    from{
        border-color: #ddd
    }
    to{
        border-color: #5cadff
    }
}
.x-sector.play{
    animation: play-sector 0.3s 0.1s ease-in-out;
}
.x-sector.play::before{
    animation: play-sector 0.3s 0.2s ease-in-out;
}
.x-sector.play::after{
    animation: play-sector 0.3s 0.3s ease-in-out;
}
.x-sector.play .x-dot{
    animation: play-dot 0.3s ease-in-out;
}
</style>
